<template>
  <ul>
    <li style="float: left;text-align: left;width: 300px;">
      <div style="font-size: 16px;vertical-align: middle;margin-top: 8px">
        <span style="color: #7a838f;">当前位置:</span>
        <span style="font-size: 14px;">{{menuName}}</span>
      </div>
    </li>

    <li class="header-right">
      <el-dropdown trigger="click" style="cursor: pointer;">
        <span class="el-dropdown-link">
          <i class="fa fa-2x fa-user-circle" style="color: #409EFF;"></i>
          <div>用户</div>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>账户设置</el-dropdown-item>
          <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>

    <li class="header-right" @click="about">
      <div style="cursor: pointer;">
        <i class="fa fa-2x fa-info-circle" style="color: #409EFF;"></i>
        <div>关于</div>
      </div>
    </li>
    <li class="header-right">
      <el-popover
        placement="bottom"
        width="450"
        trigger="click">
        <el-divider><span style="font-size: 16px;color: #aaa;">8月18日 星期二</span></el-divider>
        <el-row>
          <el-col :span="5">
            <el-tag size="mini">任务即将开始</el-tag>
          </el-col>
          <el-col :span="4">
            <span>还剩15分钟</span>
          </el-col>
          <el-col :span="7">
             <span class="task-title">安排工人 </span>
          </el-col>
          
          <el-col :span="8">
            <i style="color: #aaa;">2020-08-18 08:34:00</i>
          </el-col>
        </el-row>
        <el-divider><span style="font-size: 16px;color: #aaa;">8月18日 星期二</span></el-divider>
        <el-row>
          <el-col :span="5">
            <el-tag size="mini" type="danger">任务即将结束</el-tag>
          </el-col>
          <el-col :span="4">
            <span>还剩15分钟</span>
          </el-col>
          <el-col :span="7">
             <span class="task-title" title="进场通水通电，啊实例放假了失联飞机啊实例">进场通水通电，啊实例放假了失联飞机啊实例</span>
          </el-col>
          
          <el-col :span="8">
            <i style="color: #aaa;">2020-08-18 08:34:00</i>
          </el-col>
        </el-row>

        <div class="more-info">
          <span @click="moreNotify">查看更多<i class="el-icon-arrow-right"></i></span>
        </div>
  
        <div slot="reference" style="cursor: pointer;">
          <el-badge :value="2" :max="10" class="item">
            <i class="fa fa-2x fa-bell" style="color: #409EFF;"></i>
          </el-badge>
          <div>通知</div>
        </div>
      </el-popover>
    </li>
    
  </ul>
  
</template>

<script>
export default {
  data () {
    return {}
  },
  computed: {
    menuName () {
      return this.$store.state.tab.currentMenuName
    }
  },
  methods: {
    logout () {
      this.$store.commit('clearToken')
      this.$router.push({path:'/login'})
    },
    moreNotify () {
      this.$store.commit('setIndex', [0])
      this.$router.push({name:'notify'})
    },
    about () {
      this.$store.commit('setIndex', [0])
      this.$router.push({name:'about'})
    },
    getNotify () {
      // 修改浏览器标题
      window.document.title = '(2)项目管理系统'
    }
  },
  mounted () {
    this.getNotify()
  }
}
</script>

<style scoped>
ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 0px;
  text-align: right;
}
li {
  display: list-item;
  text-align: -webkit-match-parent;
  list-style: none;
}

.header-right {
  margin-left: 40px;
  float: right;
}

.task-title{
  color: black;
  font-weight: 700;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  width: 120px;
}

.more-info{
  text-align: center;
  padding: 5px;
  margin-top:20px;
  background: #FAFAFA;
  cursor: pointer;
}

.el-dropdown {
  font-size: 12px;
}
</style>